<script lang="ts" setup>
import { QrcodeStream } from "vue-qrcode-reader";
import { showToast } from "vant";
import { getSvg } from "@/utils";
import useOrientation from "./hooks/useOrientation.ts";
import NotLandScape from "./components/NotLandScape.vue";
import IsLandScape from "./components/IsLandScape.vue";
import ScanLine from "./components/ScanLine.vue";
import useScan from "./hooks/useScan.ts";
import ScanRes from "./components/ScanRes.vue";
import useNavigation from "./hooks/useNavigation.ts";

onMounted(() => {
  navigator.mediaDevices
    .enumerateDevices()
    .then(devices => {
      devices.forEach(device => {
        if (device.kind === "videoinput") {
          console.log("Video input device: ", device.label, device.deviceId);
        }
      });
    })
    .catch(error => {
      console.error("Error enumerating devices: ", error);
      showToast("Error enumerating devices");
    });
});

const { onDecode, onDetect, onCameraReady, onError, torchActive, goback } =
  useScan();
const { isLandscape } = useOrientation();
const { showScanRes, resetScan, scanner } = useNavigation();

onMounted(() => {
  resetScan();
});
</script>
<template>
  <div class="w-390 h-100vh bg-[rgba(0,0,0,0.83)] relative">
    <QrcodeStream
      @detect="onDetect"
      @decode="onDecode"
      @camera-on="onCameraReady"
      @error="onError"
      :torch="torchActive"
      class="rotate-[0deg]"
      v-if="isLandscape"
      ref="scanner"
    />
    <img
      :src="getSvg('Subtract')"
      class="w-25 h-25 absolute top-22 right-22 rotate-[90deg]"
      @click="goback"
    />
    <div
      class="h-256 absolute top-50% left-50% translate-[-50%] rotate-[90deg] flex justify-start items-center gap-x-60"
    >
      <NotLandScape v-if="!isLandscape" />
      <ScanLine />
      <IsLandScape v-if="isLandscape" />
    </div>
    <ScanRes v-if="showScanRes" />
  </div>
</template>
